<template>
	<view class="body">
		<view class="contet">
			<view class="items">
				<view class="left">收件人</view>
				<input class="ipt" type="text" v-model="name" placeholder="请输入收件人姓名" />
			</view>
			<view class="items">
				<view class="left">电话号码</view>
				<input class="ipt" type="text" v-model="phoneNumber" placeholder="请输入电话号码" />
			</view>
			<view class="items">
				<view class="left">所属地区</view>
				<view class="ipt" @tap="select">
					<input class="ipt" type="text" v-model="area"  />
				</view>
				<simple-address ref="simpleAddress" @onConfirm="confirm"></simple-address>
			</view>
			<view class="items">
				<view class="left">详细地址</view>
				<input class="ipt" type="text" v-model="detailAddress" placeholder="请输入详细地址" />
			</view>
			<view class="items">
				<view class="left">设置为默认地址</view>
				<switch @change="switchChange" />
			</view>
		</view>

		<view class="save">
			<view class="btn-save" @tap="save">保存地址</view>
		</view>
	</view>
</template>

<script>
	import { updateAddressInfo } from "../../../api/address/index.js"
	export default {
		data() {
			return {
				name: '',
				phoneNumber: '',
				detailAddress: '',
				area: '请选择地区',
				defaultStatus:'',
				city:'',
				province:'',
				region:''
			};
		},
		methods: {
			select() {
				this.$refs.simpleAddress.open()
			},
			confirm(e) {
				console.log(e)
				this.area = e.label;
				this.city = e.labelArr[0];
				this.province = e.labelArr[1];
				this.region = e.labelArr[2]
			},
			switchChange(e){
				if (e.target.value == false) {
					this.defaultStatus = 0
				} else {
					this.defaultStatus = 1
				}
			},
			save(){
				var obj={
					 city: this.city,
					  defaultStatus: this.defaultStatus,
					  detailAddress: this.detailAddress,
					  name: this.name,
					  phoneNumber: this.phoneNumber,
					  province: this.province,
					  region: this.region	
				}
				updateAddressInfo(obj).then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		height: 100vh;
		background-color: #F1ECE7;

		.items {
			width: 94%;
			margin: 0 3%;
			border-bottom: 1Px solid #ccc;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: 30%;
				height: 60px;
				line-height: 60px;
				font-weight: 200;
				font-size: 15px;
			}

			.ipt {
				width: 70%;
				padding: 10px 0;
				font-size: 15px;

			}

		}

		.save {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn-save {
				width: 70%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border-radius: 40px;
				font-size: 15px;
				color: #fff;
				background-color: #354e44;
				box-shadow: 0px 2px 5px rgba(0, 0, 0, .4);
			}
		}
	}
</style>
